<script setup>
import { ref , onMounted ,} from 'vue'
import { useRoute } from 'vue-router';
import tool from '@/utils/tool'
import officeRequestService from '@/api/organization/officeRequestService';
import officeRecordService from '@/api/organization/officeRecordService';
import { ElMessage } from 'element-plus'
import Loading from './loading.vue'
import { ElLoading } from 'element-plus'
//当前用户信息
const currentUser=tool.data.get("USER_INFO");
//路由
const route=useRoute()
//加载
const loading=ref(false)
//稿件数据
const Data=ref({
    id: "",
    userId: "",
    userName:"",
    approverId: "",
    approverName: "",
    name: "",
    classify: "",
    title: "",
    content: "",
    attachment: "",
})
//发送文件数据
const fileData=ref({
    id:"",
    name:"",
    status:"",
})
var approvalList =ref([
])
//当前稿件id
let fileId
onMounted(()=>{
    fileId=route.params.id
    getFile()
    selectRoleList()
})

//
// const showOverlay=()=>{
//     document.querySelector('.overlay').classList.add('show');
//     document.addEventListener('click', function (event) {
//     if (event.target === document.querySelector('.overlay')) {
//         document.querySelector('.overlay').classList.remove('show');
//     }
//     });
// }
//获取当前到稿件的信息
const getFile=()=>{
    loading.value=true
    officeRequestService.queryById(fileId).then((data)=>{
        Data.value=data
        loading.value=false
    })
    loading.value=true
    officeRecordService.queryById(fileId).then((data)=>{
        fileData.value.status=data.status
        loading.value=false
    })
}
//查询负责人
const selectRoleList =()=>{
    loading.value=true
    officeRequestService.selectRoleById(currentUser.id).then((data)=>{
        approvalList.value=data
        loading.value=false
    })
}
const revoke= ()=>{
    loading.value=true
    fileData.value.id=fileId
    fileData.value.status='已撤销'
    officeRecordService.save(fileData.value).then((data)=>{
        loading.value=false
        ElMessage({
            showClose: true,
            message:"撤销成功",
            type: 'success',
        })
    })
    .catch(()=>{
        loading.value=false
        ElMessage({
            showClose: true,
            message:"撤销失败",
            type: 'error',
        })
    })
}
</script>
<template>
    <div style="width: 100vw; height: 100vh;overflow: hidden; overflow-y: auto;">
        <div class="content">
            <div class="content-title">
                <div class="approver">
                    
                </div>
                <div class="approver">
                    <el-icon><User /></el-icon>&nbsp;接收人
                </div>
                <div class="approver">
                    <el-icon><EditPen /></el-icon>&nbsp;命名
                </div>
                <div class="approver">
                    <el-icon><CollectionTag /></el-icon>&nbsp;标题
                </div>
                <div class="content-t">
                    <el-icon><Tickets /></el-icon>&nbsp;内容
                </div>
                <div style="display: flex;align-items: center;justify-content: center;font-size: var(--my-font);height: calc( (85vh - 650px));min-height: var(--approver);">
                    <el-icon><Paperclip /></el-icon>&nbsp;附件
                </div>
            </div>
            <div class="content-main">
                <div class="approver-button">
                </div>
                <div class="approver-button">
                    <el-select
                        v-model="Data.approverId"
                        clearable
                        placeholder="请选择接收人"
                        style="width: 240px"
                        disabled
                    >
                        <el-option
                        v-for="item in approvalList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        />
                    </el-select>
                </div>
                <div class="name-input">
                    <input class="my-input" placeholder="请输入稿件名" v-model="Data.name" disabled>
                </div>
                <div class="name-input">
                    <input class="my-input" placeholder="请输入标题" v-model="Data.title" disabled>
                </div>
                <div class="content-input">
                    <textarea placeholder="请输内容" v-model="Data.content" disabled></textarea>
                </div>
                <div style="display: flex;align-items: center;justify-content: center;font-size: var(--my-font);height: calc( (85vh - 650px));min-height: var(--approver);">
                    展示附件
                </div>
            </div>
            
        </div>
        <div style="width: 100%;min-height: 80px;">

        </div>
        <div class="content-bottom" >
            <div style="display: flex;align-items: center;gap: 20px;justify-content: center;width: 100%;font-size: var(--my-font);">
                {{ fileData.status }}
                <div v-if="fileData.status=='未处理'">
                    <el-button
                        type="primary"
                        class="round"
                        @click="revoke"
                    >
                        撤销
                    </el-button>
                </div>
            </div>
        </div>
    </div>
    <div class="overlay" v-if="loading">
        <Loading ></Loading>
    </div>
</template>
<style>
:root{
    --my-font:16px;
    --approver:50px;
    --my-content:450px;
}
</style>
<style scoped>

.content{
    background-color: white;
    width: 80vw;
    margin: 2% auto 0;
    min-height: 85vh;
    box-shadow: 0 0 10px 1px rgb(0,0,0,0.1);
    border-radius: 10px;
    display: flex;
    z-index: 1;
}
.content-bottom{
    position: fixed;
    display: flex;
    justify-content: end;
    bottom: 0;
    width: 100vw;
    height: 70px;
    background-color: white;
    box-shadow: 0 0 10px 1px rgb(0,0,0,0.1);
}
@media  screen and (max-height:500px ) {
    .content-bottom{
        visibility: hidden;
    }
}
.content-title{
    width: 20%;
    border-right: 1px solid rgb(0, 0, 0, 0.1);
}
.content-main{
    width: 80%;
}
.approver{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--my-font);
    height: var(--approver);
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
.approver-button{
    display: flex;
    align-items: center;
    height: var(--approver);
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
.name-input{
    display: flex;
    align-items: center;
    height: var(--approver);
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
.my-input{
    border: none;
    outline: none;
    width: 200px;
    height: 30px;
    font-size: var(--my-font);
    transition: 0.5s;
    border-radius: 3px;
    margin-left: 10px;
}
.my-input:focus{
    box-shadow: 0 0 8px 2px rgb(0, 0, 0, 0.1);
    width: 400px;
}
.content-input{
    width: 100%;
    height: var(--my-content);
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
.content-input textarea{
    width: calc( 100% - 20px );
    border: none;
    outline: none;
    padding: 10px;
    height: 100%;
    font-size: var(--my-font);
    
    resize: none;
}
.content-t{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--my-font);
    height: var(--my-content);
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
.overlay {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
</style>